<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }

        .BMap_cpyCtrl {

            display: none;

        }

        .anchorBL {

            display: none;

        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RtbhHFSmZL2BgAExGRBanG1ReuhHGthh">

//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        var map = new BMap.Map("container");

        // 创建地图实例  
        var point = new BMap.Point(118.91032519294257, 31.95628364642178);
        // 创建点坐标  
        map.centerAndZoom(point, 15);
        //118.91032519294257, 31.95628364642178
        //118.88356467180033, 31.94574030757417
        // 初始化地图，设置中心点坐标和地图级别  
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        map.addOverlay(new BMap.Marker(new BMap.Point(118.9456353367761, 31.941829809264114)));
        map.addOverlay(new BMap.Marker(new BMap.Point(118.88356467180033, 31.94574030757417)));
        //118.90191700232558, 31.953221808855016

        var marker2=new BMap.Marker(new BMap.Point(118.90191700232558, 31.953221808855016), {
            // 指定Marker的icon属性为Symbol
            icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                scale: 2,//图标缩放大小
                fillColor: "orange",//填充颜色
                fillOpacity: 0.8//填充透明度
            })
        });
        map.addOverlay(marker2);
        marker2.setLabel(new BMap.Label("我换了图标了", { offset: new BMap.Size(20, -10) }));
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        var p1 = new BMap.Point(118.9456353367761, 31.941829809264114);
        var p2 = new BMap.Point(118.88356467180033, 31.94574030757417);

        var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
        driving.search(p1, p2);
        $.getJSON("style/ct.json", function (data) {
            map.setMapStyleV2({ styleJson: data });
        })
        var dw =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>南京义乌商品城</h4>" +
            "<img style='float:right;margin:4px' id='imgDemo' src='icon/yw.jpg' width='139' height='104' title='天安门'/>" +
            "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>南京义乌小商品城规模超前，布局合理，店摊结合，专业街（店）摊位相互映衬，相互优势补充，市场硬件完善，是一个功能现代化、布局人性化的市场。</p>" +
            "</div>";

        var infoWindow = new BMap.InfoWindow(dw);  // 创建信息窗口对象
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
            //图片加载完毕重绘infowindow
            document.getElementById('imgDemo').onload = function () {
                infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            }
        });
        var label = new BMap.Label("点击我试试哦", { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);
        var myIcon = new BMap.Icon("icon/mario2.png", new BMap.Size(32, 70), {    //小车图片
            //offset: new BMap.Size(0, -5),    //相当于CSS精灵
            imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
        });
        window.run = function () {
            var driving = new BMap.DrivingRoute(map);    //驾车实例
            driving.search(p1, p2);
            driving.setSearchCompleteCallback(function () {
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                var paths = pts.length;    //获得有几个点

                var carMk = new BMap.Marker(pts[0], { icon: myIcon });
                map.addOverlay(carMk);
                i = 0;
                function resetMkPoint(i) {
                    carMk.setPosition(pts[i]);
                    if (i < paths) {
                        setTimeout(function () {
                            i++;
                            resetMkPoint(i);
                        }, 100);
                    }
                }
                setTimeout(function () {
                    resetMkPoint(5);
                }, 100)

            });
        }

        setTimeout(function () {
            run();
        }, 1500);


        // function showInfo(e) {
        //     alert(e.point.lng + ", " + e.point.lat);
        // }
        // map.addEventListener("click", showInfo);
    </script>
</body>

</html>